<template>
  <div class="NAVV">
    <van-pull-refresh v-model="loading" @refresh="onRefresh">
      <van-row gutter="20">
        <van-col span="15"
          ><van-dropdown-menu>
            <van-dropdown-item v-model="value1" :options="option1" />
            <van-dropdown-item
              v-model="value2"
              :options="option2"
            /> </van-dropdown-menu
        ></van-col>

        <van-col><van-switch v-model="checked" />小组任务 </van-col>
        <van-col><van-switch v-model="checked1" />全部 </van-col>
        <van-col><van-switch v-model="checked2" />我反馈 </van-col>

        <van-col span="10">
          <van-search v-model="value" placeholder="搜索" />
        </van-col>
      </van-row>

      <van-row gutter="20">
        <van-col span="24">
          <div class="button-container">
            <van-button
              v-if="Nofinsh"
              class="button"
              v-for="course in courses"
              :key="course"
              size="large"
              @click="Task(course)"
              color="linear-gradient(to right, #D66D75, #F2AA9D)"
            >
              {{ course }}
            </van-button>
          </div>
        </van-col>
      </van-row>
    </van-pull-refresh>
  </div>

  <div class="paggg">
    <van-pagination
      v-model="currentPage"
      :total-items="24"
      :items-per-page="5"
    />
  </div>
</template>

<script setup>
import { useRouter } from "vue-router";
import { ref } from "vue";

const router = useRouter();
const count = ref(0);
const loading = ref(false);
const Nofinsh = ref(true);

const value = ref("");
const value1 = ref(0);
const value2 = ref("0");
const option1 = [
  { text: "开发初体验", value: 0 },
  { text: "组件化开发", value: 1 },
  { text: "路由的使用", value: 2 },
  { text: "电影列表", value: 3 },
  { text: "自动化测试", value: 4 },
  { text: "状态管理pinia", value: 10 },
  { text: "使用UI组件库", value: 11 },
];

const option2 = [
  { text: "22软件1班", value: "0" },
  { text: "22软件3班", value: "1" },
];

const onRefresh = () => {
  setTimeout(() => {
    loading.value = false;
    count.value++;
    Nofinsh.value = true;
  }, 1000);
};

const Task = (course) => {
  router.push({ path: `/task/${course}`, query: { course } });
};

const courses = [
  "开发初体验",
  "组件化开发",
  "路由的使用",
  "电影列表",
  "自动化测试",
  "状态管理pinia",
  "使用UI组件库",
];

const checked = ref(false);
const checked1 = ref(false);
const checked2 = ref(false);

const currentPage = ref(1);
</script>
<style>
.NAVV {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-top: 100px;
  width: 100%;
  padding: 10px;
  min-height: 100px;
}
.NAVV .van-search {
  background: none;
}
.biaoqian {
  word-wrap: break-word;
}
.van-col--20 {
  display: flex;
  padding-left: 1px;
  justify-content: center;
  white-space: nowrap;
}
.button-container {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  width: 100%;
}
.button {
  flex: 0 0 auto;
  width: auto;
}
</style>
